<template>
    <div class="navplugin">
        <!--内容头部-->
       <div class="sec-top d-flex ai-center jc-between">
           <h2 class="sec-name"><a href="">{{spt.title}}</a></h2>
           <div class="sec-tabs">
               <ul class="d-flex ai-center jc-around" >
                   <li  v-for="(item,i) in spt.name" :key="i"><a href="">{{item}}</a></li>
               </ul>
           </div>
       </div>
        <!--内容中部-->
       <div class="sec-content">
           <article v-for="(item,i) in a" :key="i" class="newsCard">
               <!--如果是需要置顶的就是上面这个a标签-->
               <a :href="item.link" v-if="item.imgsrc3gtype==2" class="topArt">
                   <h3 class="title">{{item.title}}</h3>
                   <div class="news-pic">
                       <img :src="option.url+'?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1&type=webp'" alt="" v-for="(option,ar) in item.picInfo" :key="ar">
                   </div>
                   <div class="detail">
                       <span class="news-tag" >{{item.tag}}</span>
                       <span class="news-source">{{item.source}}</span>
                       <span class="pubtime">4小时前</span>
                       <span class="reply">{{item.tcount}}跟帖</span>
                   </div>

               </a>
               <!--否则就是下面这个a标签-->
               <a :href="item.link" v-else class="bomArt">
                   <div class="news-info">
                       <h3 class="title">{{item.title}}</h3>
                       <div class="detail">
                           <span class="news-tag" >{{item.tag}}</span>
                           <span class="news-source">{{item.source}}</span>
                           <span class="pubtime">4小时前</span>
                           <span class="reply">{{item.tcount}}跟帖</span>
                       </div>
                   </div>
                   <div class="news-pic">
                       <img :src="option.url+'?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1&type=webp'" alt="" v-for="(option,ar) in item.picInfo" :key="ar">
                   </div>
               </a>
           </article>

       </div>
        <!--内容底部-->
        <div class="sec-bottom">
            <a href="">进入{{spt.title}}频道></a>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Local.vue",
        props:["spt","cotary"],
        data(){
            return {
                a:null,
                onOff:true
            }
        },
        computed:{

        },
        methods:{
            getJsp(){
                this.$jsonp('https://3g.163.com/touch/jsonp/article/local/广西_南宁/0-10.do').then(popData=>{
                    if(popData){
                       // console.log(popData)
                        this.a=popData.data
                       // console.log(this.a)
                    }
                })
            }
        },
        created() {
            this.getJsp()
        }
    }
</script>

<style scoped>
    .navplugin{
        margin-bottom: .12rem;
        background: #fff;
        padding-bottom: .2rem;
    }
    .sec-top{
        font-size: .3rem;
        padding: .5rem 0 .5rem .2rem;
        height: .5rem;
    }
    .sec-name{
        font-size: .4rem;
    }
    .sec-tabs ul li{
        margin-left: .32rem;
        font-size: .34rem;
    }
    .sec-tabs .show li{
        display: none;
    }
    .sec-content .title{
        font-weight: normal;
        overflow: hidden;
        line-height: .45rem;
        font-size: .34rem;
        margin-top: .2rem;
    }
    .sec-content .bomArt{

    }
    .topArt .news-pic{
        margin-top: .12rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .topArt>h3{
        padding: .3rem 0 .3rem 0;
    }
    .newsCard .detail{
        padding: .3rem 0 .3rem 0;
    }
    .topArt .news-pic img{
        flex: 0 0 33.1%;
        display: block;
        width: 2.34rem;
        height: 1.46rem;
        object-fit: contain;
    }
    .bomArt .news-pic{
        width: 2.34rem;
        flex: 0 0 auto;
    }
    .bomArt .news-pic img{
        height: 1.46rem;
        position: absolute;
        width: 2.5rem;
        right: .2rem;
    }
    .newsCard{
        padding: .24rem .22rem;
        border-bottom: 1px solid #eee;
    }
    .newsCard .detail{
        color: #b4b4b4;
        line-height: .34rem;
        height: .34rem;
        margin-top: .15rem;
        font-size: .24rem;
        letter-spacing: 0;
        overflow: hidden;
    }
    .detail span{
        font-size: .24rem;
        margin-right: .12rem;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }
    .newsCard .detail .news-tag{
        color: #ee1a1a;
    }
    .newsCard a{
        display: flex;
    }
    .topArt{
        flex-wrap: wrap;
    }
     .sec-bottom{
         line-height: .42rem;
         font-size: .3rem;
         display: block;
         color: #ee1a1a;
         height: .42rem;
         vertical-align: middle;
         text-align: center;
         margin-top: .25rem;
     }
    .sec-bottom a{
        color: #ee1a1a;
    }
    .newsCard h3{
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-word;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }
</style>